<template>
	<view class="">
		<u-sticky>
			<view class="row between cart-tops">
				<view class="cart-tips row fill">
					<view class="cart-tips-item row">
						<image src="/static/img/wa.png" class="cart-tips-icon"></image>
						<text class="cart-tips-txt">100%正品保证</text>
					</view>
					<view class="cart-tips-item row">
						<image src="/static/img/wa.png" class="cart-tips-icon"></image>
						<text class="cart-tips-txt">所有商品精挑细选</text>
					</view>
					<view class="cart-tips-item row">
						<image src="/static/img/wa.png" class="cart-tips-icon"></image>
						<text class="cart-tips-txt">售后无忧</text>
					</view>
				</view>
				<view class="cart-tips-btn" @tap="changeCartModel">{{ canOptions ? "管理" : "完成" }}</view>
			</view>
		</u-sticky>
		<block v-if="loaded && dataList.length > 0">
			<view class="cart-con">
				<view class="cart-item-con row" v-for="(item, index) in dataList" :key="index">
					<view class="cart-item-left row">
						<view class="cart-item-icon" @tap="userOptionsItem('item', item)">
							<icon type="success" color="#CC1313" size="21" v-if="item.checked" />
							<icon type="circle" size="21" v-else />
						</view>
						<view class="cart-item-img" @tap="navTo(`/pages/details/goodDetails?id=${item.id}`)">
							<image :src="item.icon" mode="aspectFill" class="img"></image>
							<view class="s-con row center" v-if="item.goodsStatus != 0">
								<image src="/static/img/yihsouxin.png" mode="" class="s"></image>
							</view>
						</view>
					</view>
					<view class="cart-item-right" @tap="navTo(`/pages/details/goodDetails?id=${item.id}`)">
						<view class="clamp2 cart-item-title">{{ item.name }}</view>
						<view class="cart-item-price">￥{{ item.price }}</view>
					</view>
				</view>
			</view>
			<view class="cart-foot row between">
				<view class="cart-item-left row">
					<view class="cart-item-icon" style="margin-right: 20upx;" @tap="userOptionsItem('all')">
						<icon type="success" color="#CC1313" size="21" v-if="allChecked" />
						<icon type="circle" size="21" v-else />
					</view>
					<view class="cart-foot-txt row">
						<text class="cart-all">全选</text>
						<text class="cart-fee" v-if="totalPrice != 0">
							合计:
							<text class="cart-money">{{ totalPrice }}</text>
						</text>
					</view>
				</view>
				<view class="cart-btn" hover-class="hover-opacity" @tap="creatOrder" v-if="canOptions">去结算</view>
				<view class="cart-btn" hover-class="hover-opacity" @tap="delCart" v-else>删除</view>
			</view>
		</block>
		<mix-empty type="cart" :hasLogin="hasLogin" v-if="dataList.length==0"></mix-empty>
		<mix-loading v-if="isLoading"></mix-loading>
		<mix-modal text="确定删除吗?删除后无法恢复" title="温馨提示" ref="mixModal" @onConfirm="onConfirm"></mix-modal>
	</view>
</template>

<script>
import mixEmpty from "@/components/mix-empty/mix-empty.vue";
export default {
	components: {
		mixEmpty
	},
	data() {
		return {
			totalPrice: 0,
			canOptions: true,
			dataList: [],
			ids: [], //  购物车id集合
			allChecked: false,
			hasLogin: false
		};
	},
	watch: {
		dataList: {
			handler(newval) {
				let array = new Array(),
					array2 = new Array(),
					price = 0;
				if (this.canOptions) {
					array2 = newval.filter(item => item.goodsStatus == 0);
					array = newval.filter(item => item.checked);
					array.forEach(item => {
						price += Number(item.price);
					});
					this.totalPrice = price.toFixed(2);
				} else {
					array2 = newval;
					array = newval.filter(item => item.checked);
				}
				if (array.length == array2.length) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			},
			immediate: true,
			deep: true
		}
	},
	onShow() {
		if (uni.getStorageSync("uid")) {
			this.loadData();
			this.hasLogin = true;
		}
	},
	methods: {
		async onConfirm() {
			const res = await this.$request("goods/cart-del", {ids: this.ids.join(",")}, {showLoading: true});
			if (res.result == 0) {
				this.$util.msg("删除成功！");
				this.loadData();
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		changeCartModel() {
			this.canOptions = !this.canOptions;
			this.initCart();
		},
		initCart() {
			this.dataList.forEach(item => {
				item.checked = false;
			});
			this.totalPrice = 0;
		},
		async loadData(pullScroll) {
			const data = {
				uid: uni.getStorageSync("uid"),
				type: "9",
				pageNo: 1,
				pageSize: "999999"
			};
			const res = await this.$request("goods/goods-list", data);
			this.dataList = [];
			if (res.result == 0) {
				if (res.data && res.data.list.length != 0) {
					res.data.list.forEach(item => {
						item.checked = false;
					});
					this.dataList = res.data.list;
				}
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		userOptionsItem(type, item) {
			let checked;
			if (type === "all") {
				checked = !this.allChecked;
				this.dataList.forEach(item => {
					if (!this.canOptions) {
						item.checked = checked;
					} else {
						if (item.goodsStatus == 0) {
							item.checked = checked;
						}
					}
				});
			} else {
				if (item.goodsStatus == 0 || !this.canOptions) {
					checked = !item.checked;
					item.checked = checked;
				}
			}
		},
		delCart() {
			let array = this.dataList.filter(item => item.checked);
			this.ids = array.map(item => item.cartId);
			if (array.length == 0) {
				this.$util.msg("请选择要删除的商品!");
				return;
			}
			this.$refs.mixModal.open();
		},
		creatOrder() {
			let array = this.dataList.filter(item => item.checked),
				dataInfo = new Object();
			if (array.length == 0) {
				this.$util.msg("请选择要结算的商品!");
				return;
			}
			dataInfo.type = 1;
			dataInfo.list = array;
			getApp().globalData.creatOrderDataInfo = dataInfo;
			this.navTo("/pages/order/buyInvert");
		}
	}
};
</script>
<style>
page {
	background: #f0f0f0;
}
</style>

<style scoped lang="scss">
.cart-all {
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	margin-right: 20upx;
}
.cart-fee {
	font-size: 27upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
}
.cart-money {
	color: #cb1414;
	font-size: 30upx;
	position: relative;
	padding-left: 30upx;
}
.cart-money::before {
	content: "￥";
	font-size: 22upx;
}
/* 购物车 部分 */

.cart-con {
	background: #ffffff;
	border-radius: 20upx;
	margin-top: 20upx;
	margin-bottom: 120upx;
	overflow: hidden;
}
.cart-item-con {
	padding: 20upx;
}
.cart-item-img {
	width: 144upx;
	height: 144upx;
	border-radius: 10upx;
	overflow: hidden;
	margin: 0 20upx;
	position: relative;
}
.s-con {
	width: 144upx;
	height: 144upx;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 10upx;
	position: absolute;
	top: 0;
	left: 0;
}
.s {
	width: 87upx;
	height: 87upx;
}
.img {
	width: 144upx;
	height: 144upx;
}
.cart-item-right {
	width: 100%;
	height: 144upx;
	position: relative;
}
.cart-item-title {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 44upx;
	position: absolute;
	top: 0;
}
.cart-item-price {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cb1414;
	line-height: 36upx;
	position: absolute;
	bottom: 0;
}
/* //   头部 */
.cart-tops {
	height: 88upx;
	background: #f8f8f8;
	padding: 0 20upx;
}
.cart-tips-item {
	flex: 1;
}
.cart-tips-icon {
	width: 24upx;
	height: 24upx;
	margin-right: 10upx;
}
.cart-tips-txt {
	font-size: 22upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	line-height: 36upx;
}
.cart-tips-btn {
	font-size: 26upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}
.cart-foot {
	position: fixed;
	bottom: 0;
	height: 110upx;
	width: 100%;
	background: #ffffff;
	z-index: 33;
	padding: 0 20upx;
}

.cart-btn {
	width: 192upx;
	height: 70upx;
	text-align: center;
	line-height: 70upx;
	background: #cc1313;
	border-radius: 35upx;
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
</style>
